import React from 'react'
import styled from 'styled-components'
import '../../../theme/variable.css'

const StyleButton = styled.button`
  // color: #FFF;
  border: none;
  // background: var(--color-primary);
`
export const Button = () => {
  return (
    <div>
      <StyleButton className='button '>default</StyleButton>
      <StyleButton className='button button-success'>success</StyleButton>
      <StyleButton className='button button-primary'>primary</StyleButton>
      <StyleButton className='button button-warning'>warning</StyleButton>
      <StyleButton className='button button-danger'>danger</StyleButton>
      <br/>
      <StyleButton className=' button-plain'>default</StyleButton>
      <StyleButton className=' button-plain button-plain-success'>success</StyleButton>
      <StyleButton className=' button-plain button-plain-primary'>primary</StyleButton>
      <StyleButton className=' button-plain button-plain-warning'>warning</StyleButton>
      <StyleButton className=' button-plain button-plain-danger'>danger</StyleButton>

    </div>
  )
  // return React.createElement('button', null, 'hello');
}
export default Button
